<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			a {
				width: 150px;
				height: 50px;
				background-color: pink;
				/* 把行内元素a转换成块级元素 */
				display: block; 
			}
			div {
				
				background-color: #55aa7f;
				/* 把div块级元素转换成行内元素 */
				display: inline;
			}
			span {
				width: 100px;
				height: 50px;
				display: inline-block;
				background-color: #FFC0CB;
			}
		</style>
	</head>
	<body>
		<!-- 特殊情况下, 需要元素模式转换, 简单讲: 一个模式的元素需要另一个模式的范围 -->
		<!-- 例如想要增加链接a的触发范围 -->
		<a href="#">金星</a>
		<a href="#">金星</a>
		<div>我是块元素</div>
		<div>我是块元素</div>
		<span>行内元素转换行内块元素</span>
		<span>行内元素转换行内块元素</span>
	</body>
</html>
